<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true" class="nav-custom" addHeight>
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">预警中心</block>
		</cu-custom>

		<view class="app-box" :style="{ height: appHeight + 'px' }">
			<u-tabs
				active-color="#fff"
				inactive-color="#fff"
				bg-color="#2695FE"
				style="height: 80rpx"
				:bold="false"
				font-size="28"
				:list="list"
				:is-scroll="false"
				:current="current"
				@change="changeTabs"
			></u-tabs>
			<view class="app-box-content">
				<qx v-if="pageCur == '1'"></qx>
				<cmMap v-if="pageCur != '1'" :showType="pageCur"></cmMap>
			</view>
		</view>
	</view>
</template>

<script>
	import cmMap from '@/components/monitor/meteo-warn/cmMap.vue'
	import qx from '@/components/monitor/meteo-warn/qx.vue'
	export default {
		data() {
			return {
				appHeight: 0,
				current: undefined,
				pageCur: undefined,
				list: [
					{ name: '气象预警', value: '1' },
					{ name: '山洪预警', value: '2' },
					{ name: '地灾预警', value: '3' },
					{ name: '河道预警', value: '4' }
				]
			}
		},
		components: {
			cmMap,
			qx
			// qx: () => import('@/components/monitor/meteo-warn/qx.vue'),
			// cmMap: () => import('@/components/monitor/meteo-warn/cmMap.vue')
		},
		onLoad(options) {
			if (options && options.index) {
				this.pageCur = options.index
				this.current = this.list.findIndex((item) => {
					return item.value == options.index
				})
			}
		},
		mounted() {
			this.statPage()
		},
		methods: {
			async statPage() {
				this.appHeight = await this.$getHeight('.nav-custom')
			},
			changeTabs(index) {
				this.current = index
				this.pageCur = this.list[index].value
			}
		}
	}
</script>

<style lang="less">
	.app-box {
		width: 100%;
		.app-box-content {
			height: calc(100% - 80rpx);
		}
	}
</style>
